<template>
  <div>
    <div class="body"  v-for="(item,index) in personDetail" :key="index"  v-if="index < limit">
    	<div class="left"><img :src="img" alt=""></div>
    	<div class="right">
    		<div class="name">{{item.xm}}
    			<mt-button size="small" type="primary" class="tag-z">直系</mt-button>
    			<mt-button size="small" type="primary" class="tag-z">{{item.rela}}</mt-button>
    		</div>
			<div>
				<mt-button size="small" v-bind:class="[items == '布控' ? 'color' : '', 'tag-z']" v-for="(items,index) in item.bs" :key="index">{{items}}</mt-button>
			</div>
    		<div class="data">
              <span class="key">性别 ：</span><span class="value">{{item.xb}}</span>
            </div>
    		<div class="data">
              <span class="key">身份证 ：</span><span class="value">{{item.sfzh}}</span>
            </div>
    		<div class="data">
              <span class="key">出生日期 ：</span><span class="value">{{item.csrq}}</span>
            </div>
    		<div class="data">
              <span class="key">户籍地 ：</span><span class="value">{{item.hjd}}</span>
            </div>
    	</div>
    </div>
  </div>
</template>
<script>
  // import data from './personFile.json'
  export default {
    data() {
      return {
        img: 'http://imgsrc.baidu.com/forum/w=580/sign=f288a1619a529822053339cbe7cb7b3b/a6e774d9f2d3572ca574017a8013632763d0c3bd.jpg'
      }
    },
    props: {
      personDetail: {
        type: Array,
        default() {
          return []
        }
      },
      limit: {
        type: Number,
        default: 100
      }
    },
    filters: {
      changeName: function(value) {
        return value
      }
    },
    created() {
      // this.personDetail = data.zx
    }
  }
</script>
<style scoped>
.body {
  display: flex;
  height: 12rem;
  background-color: #fff;
  padding: 1rem 0;
  border-top: 1px solid #eee;
}
.right {
  flex: 3;
}
.left {
  flex: 1;
  padding-left: 1rem;
}
img {
	max-width: 100%;
    height: 90%;
    margin-top: 1rem
}
.data {
  margin-top: .1rem;
}
.key {
  margin-left: 1rem; 
  color: #656565;
  font-size: .9rem;
}
.value {
  color: #656565;
  font-size: .9rem;
}
.name {
  margin-left: 1rem;
  font-weight: 600;
  font-size: 1.1rem;
}
.tag-z {
	margin-left: .8rem;
	font-size: .8rem;
	padding: 0 8px;
    height: 24px;
    vertical-align: middle;
    border-radius: 15px;
}
.color {
	background-color: #FF6600;
}
</style>